<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '/@/store/modules/user';
import { useTabs } from '/@/hooks/web/useTabs';

const { refreshPage } = useTabs();
const userStore = useUserStore();
const user = computed(() => {
  const getLoginApp = userStore.getLoginApp;
  const appList = getLoginApp.accessableList || [];
  const resourceId = getLoginApp.clientManagerId;
  const appId = getLoginApp.currentId;
  const resourceList = appList.filter(e => e.clientId == appId)[0]?.clientManagerModel || [];
  const resource = resourceList.filter(e => e.clientManagerId == resourceId)[0];
  return {
    resource,
    resourceList,
  }
})

const handleToggleAction = (resourceId: number) => { 
  userStore.setLoginApp(Object.assign({}, userStore.getLoginApp, {clientManagerId: resourceId}))
  refreshPage();
}

</script>

<template>
  <el-dropdown @command="handleToggleAction" popper-class="resoure-change" v-if="user.resource">
    <el-tag>{{ user.resource?.managerName }}</el-tag>
    <template #dropdown>
      <el-dropdown-item :command="item.clientManagerId" class="p-2 px-6" v-for="item in user.resourceList" :class="{'active': item.clientManagerId == user.resource.clientManagerId}">
        <span>{{ (item.managerName) }}</span>
      </el-dropdown-item>
    </template>
  </el-dropdown>
</template>

<style lang="less">
.resoure-change {
  li.active.el-dropdown-menu__item {
    color: var(--el-dropdown-menuItem-hover-color);
    background: var(--el-dropdown-menuItem-hover-fill);
  }
}
</style>